<script setup lang="ts">
import { onMounted } from 'vue'
import BaseDrawer from './components/base-drawer'
import BaseModal from './components/base-modal'
import { useAsyncComponents } from './hooks/useAsyncComponents'
import { useFooter } from './hooks/useFooter'

const { createFooter } = useFooter('drawer')

const { component_key, components, modal, drawer, loadComponent, openModal, openDrawer } =
  useAsyncComponents<'form' | 'detail'>()

const handleVisibleChange = () => {
  console.log('visible change')
}

const handleClick1 = async () => {
  await openDrawer({
    content: () => import('./views/Form.vue'),
    key: 'form',
    onLoaded(ctx) {
      console.log(ctx)
    },
    afterSubmit() {
      console.log('afterSubmit')
    }
  })
}

const handleClick2 = async () => {
  await loadComponent('form', () => import('./views/Form.vue'))
  modal.visible = true
}

onMounted(() => {})

const footer = createFooter({
  showSaveBtn: true,
  onSubmit: async function (): Promise<void> {}
})
</script>

<template>
  <a-button type="primary" @click="handleClick1">Modal1</a-button>
  <a-button type="primary" @click="handleClick2">Modal2</a-button>

  <component :is="footer" />

  <BaseModal
    v-if="component_key"
    :ref="(el) => (modal.ref = el)"
    v-model:visible="modal.visible"
    :comp="components[component_key]"
    @update:visible="handleVisibleChange"
  />

  <BaseDrawer
    v-if="component_key"
    :ref="(el) => (drawer.ref = el)"
    v-model:visible="drawer.visible"
    :comp="components[component_key]"
  />
</template>

<style scoped></style>
